<template>
  <!-- <div class="main_3"> -->

  <!-- 头像 -->
  <div class="demo-fit">
    <img :src="url" alt="">
    <!-- <span>
      欢迎回来！"{{ username }}"
    </span> -->
  </div>
  <!-- 登录 -->
  <el-form ref="loginForm" :rules="loginRules" :model="loginUser" label-width="auto" class="loginForm">
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="loginUser.email" placeholder="邮箱" />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="loginUser.password" placeholder="密码" type="password" />
      </el-form-item>
      <el-form-item>
        <el-button @click="handleLogin()" type="primary" class="btn_submit">登录</el-button>
      </el-form-item>
      <!-- <el-checkbox-group v-model="loginUser.type">
        <el-checkbox label="" name="type" >
          <span >已阅读并同意
            <el-link type="primary">《用户服务协议》</el-link>
            和
            <el-link type="primary">《隐私政策》</el-link>
            </span>
        </el-checkbox>
      </el-checkbox-group> -->
    </el-form>

  <!-- 用户在线 -->
  <!-- <div class="user_info">
    <div class="info_btn">
      <a href="">
        <p>个人中心</p>
      </a>
      <a href="">
        <p>
          在线简历
        </p>
      </a>
    </div>

  </div> -->
  <!-- </div> -->
</template>

<script lang="ts">
import { loginUser, loginRules } from "@/utills/loginValidators";
// import LoginForm from "@/components/LoginForm.vue";
import { ref, reactive, toRefs } from "vue";
export default {
  name: "LoginRegister",
  setup() {
    const username = "小黑子"
    const state = reactive({

      url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
    })

    const { url } = toRefs(state)

    // 登录
    const loginForm = ref();
    // 触发登录方法  async异步
    const handleLogin = async () => {
      console.log(loginForm.value);
      loginForm.value.validate((valid: any) => {
        if (valid) {
          console.log("submit!");
        } else {
          console.log("error submit!");
          return false;
        }
      });
    };
    return {
      // 登录
      loginUser,
      loginRules,
      // LoginForm,
      loginForm,
      handleLogin,
      username,
      url,


    }
  }
}
</script>

<style scoped>
.user_info {
  height: 100px;
  width: 100%;
}

.info_btn {
  height: 80px;
    width: 100%;
    display: inline-flex;
    justify-content: space-around;
    align-items: center;
}

/* 头像 */
img {
  height: 90px;
  width: 90px;
  border-radius: 100%;

}

.demo-fit {
  height: 40%;
  width: 100%;
  /* 将头像水平居中 */
  display: inline-flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}

/* 登录 */
.el-form {
  width: 256px;
  padding-left: 14px;
}

.btn_submit {
  width: 206px;
}

span {
  font-size: 10px;
}

.el-link {
  font-size: 12px;
}

.el-checkbox {
  --el-checkbox-checked-text-color: black
}

a {
    display: flex;
    background-color: rgb(86, 88, 223);
    width: 100px;
    text-decoration: none;
    height: 30px;
    justify-content: space-around;
    align-items: center;
    border-radius: 5px;
    color: #FFF;
}
</style>